Brand Essence
ATLAS Meridia is an experimental laboratory for AI tools, knowledge management systems, and creative technology solutions. The visual language balances intellectual authority with warmth and approachability.
Voice
Thoughtful, precise, curious. We explain complex ideas clearly without condescension. We're excited about discovery but measured in claims.
Visual Character
Editorial sophistication meets digital craft. Classic typography signals intellectual seriousness. Warm gold accents add life without flash. Generous whitespace lets ideas breathe.
Color System
A desaturated navy foundation with warm cream surfaces and amber-gold accents. The palette is deliberately muted — sophisticated without being cold.
Navy Scale
Primary backgrounds in dark mode. Desaturated with slight warmth to avoid feeling clinical.
Cream Scale
Primary backgrounds in light mode. Warm paper tones, not stark white.
Accent — Amber Gold
The signature accent. Use for interactive elements, emphasis, and brand moments. In light mode, use --accent-dark (#a87a3a) for small text to ensure contrast.
Dark Mode Text
Custom text colors for dark mode — softer than pure cream to reduce contrast and eye strain.
Typography
Four typefaces, each with a specific role. The combination of classical serifs and clean sans creates intellectual warmth.
Font Stack
Display Type
Cormorant Garamond at weight 300, with italics at weight 400. Use for headlines, hero sections, and pullquotes.
The Verification Problem
in the Age of Infinite
Body Type
Source Serif 4 at 22px (--text-body) with 1.65 line height. Variable font with optical sizing. In dark mode, use weight 300 with +0.01em letter-spacing.
We're entering an era where the cost of generating plausible content—text, images, video, code—approaches zero. The economic and cognitive barriers that once separated "real" from "fabricated" are collapsing. This isn't a future scenario; it's the present condition.
Dark mode adjustment: Set font-weight: 300 and letter-spacing: 0.01em to compensate for light text on dark background appearing heavier.
Type Scale
| Token | Size | Use |
|---|---|---|
| --text-xs | 0.75rem (12px) | Labels, captions |
| --text-sm | 0.875rem (14px) | Secondary text, buttons |
| --text-base | 1.125rem (18px) | UI text, callouts |
| --text-body | 1.375rem (22px) | Article body |
| --text-lg | 1.5rem (24px) | Lead paragraphs |
| --text-xl | 1.75rem (28px) | Section headers |
| --text-2xl | 2.25rem (36px) | Pullquotes |
| --text-3xl | 3rem (48px) | Page titles |
| --text-4xl | 4rem (64px) | Hero headlines |
| --text-5xl | 5.5rem (88px) | Large hero |
| --text-6xl | 7rem (112px) | Maximum impact |
Spacing
Consistent spacing tokens based on a 4px base unit. Use these variables throughout for predictable rhythm.
| Token | Value | Pixels |
|---|---|---|
| --space-1 | 0.25rem | 4px |
| --space-2 | 0.5rem | 8px |
| --space-3 | 0.75rem | 12px |
| --space-4 | 1rem | 16px |
| --space-5 | 1.5rem | 24px |
| --space-6 | 2rem | 32px |
| --space-8 | 3rem | 48px |
| --space-10 | 4rem | 64px |
| --space-12 | 6rem | 96px |
| --space-16 | 8rem | 128px |
Layout Widths
| Token | Value | Use |
|---|---|---|
| --width-prose | 38rem (~608px) | Article body column |
| --width-wide | 52rem (~832px) | Wide content, images |
| --width-full | 80rem (~1280px) | Max container width |
Components
Reusable UI elements styled consistently across the system.
Body text with a styled link that uses an accent underline and subtle hover state.
Use callouts to highlight important information, key takeaways, or experimental notes that deserve extra attention.
The question isn't whether AI-generated content is "good enough." It's whether we can distinguish what's real.
— Internal observationUse between major sections. The compass icon in accent color at 0.7 opacity.
const verify = async (claim) => {
const methodology = await extractMethodology(claim);
return auditMethodology(methodology);
};Image Treatments
Five image treatments for different editorial contexts. All use 6px border-radius except full-bleed.
Dark mode: Apply filter: brightness(0.92) contrast(1.02) to photos to reduce glare on dark backgrounds.
Ghost Integration
Notes for implementing this design system in Ghost themes and blog posts.
Post Content Styling
Ghost's content API outputs semantic HTML. Target these elements:
.post-content p {
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--body-weight);
letter-spacing: var(--body-tracking);
line-height: var(--leading-relaxed);
margin-bottom: var(--space-5);
}
.post-content h2 {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: 300;
margin-top: var(--space-12);
margin-bottom: var(--space-5);
}
.post-content a {
text-decoration-color: var(--accent);
text-underline-offset: 3px;
}
.post-content blockquote {
/* Use pullquote styling */
border-left: 3px solid var(--accent);
padding-left: var(--space-6);
}
.post-content pre {
background: var(--navy-950);
border: 1px solid var(--navy-800);
}Card Markup
Ghost cards (callout, bookmark, etc.) can be styled with custom classes:
/* Ghost callout card */
.kg-callout-card {
background: linear-gradient(135deg,
rgba(201, 146, 74, 0.08) 0%,
rgba(138, 101, 48, 0.04) 100%);
border: 1px solid rgba(201, 146, 74, 0.2);
border-left: 4px solid var(--accent);
}
/* Ghost image card widths */
.kg-width-wide {
width: calc(100% + 6rem);
margin-left: -3rem;
}
.kg-width-full {
width: 100vw;
margin-left: calc(-50vw + 50%);
}Theme Variables
Include the full token set in your theme's CSS. Ghost supports :root variables. Dark mode can be toggled via:
<html data-theme="dark">
// or
@media (prefers-color-scheme: dark) {
:root { /* dark mode tokens */ }
}Reading Progress Bar
Optional enhancement. 3px height, gradient fill:
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg,
var(--accent) 0%,
var(--accent-light) 100%);
z-index: 1000;
}